<!--
 * @Author: wuyang
 * @Description: 
 * @Date: 2023-01-05 14:32:35
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-07 14:36:56
 * @FilePath: \vue3-graduate\src\views\login\components\qrcode.vue
-->
<!--
 * @Author: wuyang
 * @Description: 
 * @Date: 2023-01-05 14:32:35
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-06 09:45:56
 * @FilePath: \vue-ts-vite\src\views\login\components\qrcode.vue
-->
<template>
  <div>
    <!-- 登录表单 -->
    <el-form
      :model="loginForm"
      :rules="registerRules"
      status-icon
      ref="ruleFormRef"
    >
      <Motion :delay="100">
        <el-form-item class="flex-center">
          <div class="flex-center w-full">
            <img src="@/assets/login/qrcode.png" />
          </div>
        </el-form-item>
      </Motion>

      <Motion :delay="150">
        <el-form-item class="button-list">
          <el-divider> 扫码成功后点击确认，即可完成登录 </el-divider>
        </el-form-item>
      </Motion>

      <Motion :delay="200">
        <!-- 返回按钮 -->
        <el-form-item >
          <el-button
            class="w-full"
            @click="useUserStoreHook().SET_CURRENTPAGE(0)"
          >
            返回
          </el-button>
        </el-form-item>
      </Motion>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// 注册验证规则
import { registerRules } from "../utils/rules";
// 路由
import { useRouter } from "vue-router";
// hook
import { useUserStoreHook } from "@/store/modules/user";
// 过渡动画
import Motion from "../utils/motion";

const router = useRouter();
// 表单数据
const loginForm = reactive({
  phone: "",
  captcha: "",
});

// 跳转登录页面
const navLogin = () => {
  router.push("/login");
};
</script>
